<template>
  <div class="navbar">
    <div style="display: flex;align-items: center;-webkit-box-align: center;justify-content: space-between">
      <div class="navbar-logo">
        <img src="../../assets/img/logo.png" style="height: 40px;width: 140px">
        <div class="navbar-logo-name">用户中心</div>
      </div>
      <el-dropdown class="avator-container">
        <span class="el-dropdown-link el-dropdown-selfdefine">
          <em>
            <el-icon style="vertical-align: middle"><User /></el-icon>
          </em>
          <span class="avator-username">李晓明</span>
        </span>
        <template #dropdown>
          <div class="dropdown-container">
            <i>当前用户: 李晓明</i>
            <i>登录时间: 7月14日 06:30:41</i>
            <i><a href="#">退出</a></i>
          </div>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="js">
import {User} from "@element-plus/icons-vue";

const sysModelList = [
  {
    id: "1",
    name: "sup-system",
    label: "监管系统"
  },
  {
    id: "2",
    name: "sys-setting",
    label: "系统设置"
  },
  {
    id: "3",
    name: "user-center",
    label: "用户中心"
  },
  {
    id: "4",
    name: "cloud-report",
    label: "云报表"
  },
  {
    id: "5",
    name: "visualization",
    label: "可视化"
  },
]

</script>

<style scoped lang="scss">

.navbar-logo {
  display: flex;
  justify-content: center;
  line-height: 40px;
  cursor: pointer;
}


.navbar-logo-name {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  margin-left: 10px;
}

.navbar {
  height: 40px;
  width: 100%;
  background: rgb(0, 102, 204);
  border-bottom: 1px solid #e8e8e8;
  padding: 0 20px;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  height: 49px;
  line-height: 49px;
  border-bottom: 1px solid;

  ul {
    display: flex;
    gap: 10px;
    margin: 0 20px;
  }

  ul li {
    list-style-type: none;
  }
}

.avator-container {
  position: fixed;
  right: 60px;
  cursor: pointer;
  color: #fff;
  .avator-username {
    font-style: normal;
    margin-left: 4px;
    vertical-align: middle;
    font-weight: lighter;
  }
}



.dropdown-container {
  width: 160px;
  height: 72px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  i {
    font-style: normal;
  }
}

</style>